<template>
  <view class="home">
    <view class="container">
      <image src="../../static/imgs/Frame 13.png" mode=""></image>
      <view class="title">
        <u-icon name="arrow-left" color="black" size="30" @click='Fhuidnlinfg()'></u-icon>
        <text class="title_name">券码</text>
      </view>
    </view>

    <!--  -->
    <view class="content" v-for="item in 4" @click="godetail()">
      <view class="title">
        长清大学生红叶谷汉服真人秀开团
        <u-icon name="arrow-right" color="#999" size="25"></u-icon>
      </view>
      <view class="name">姓名：徐佳</view>
      <view class="image">
        <image src="https://img2.baidu.com/it/u=2020520018,1139302565&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
          mode=""></image>
        <view class="card">鲁A 001</view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      };
    },
    methods: {
      Fhuidnlinfg() {
        uni.navigateBack({
          delta: 1
        })
      },
      godetail() {
        uni.navigateTo({
          url: '/pages/vouchers/vouchers_details'
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .home {
    background: #F5F5F5;
    // height: 1612rpx;
  }

  .container {
    position: relative;
    width: 750rpx;
    height: 176rpx;

    >image {
      width: 100%;
      height: 100%;
    }

    .title {
      position: absolute;
      bottom: 28rpx;
      left: 32rpx;
      font-weight: bold;
      color: #333333;

      .title_name {
        font-size: 32rpx;
        margin-left: 280rpx;
      }
    }
  }

  .content {
    margin: 32rpx 32rpx 20rpx;
    padding: 32rpx;
    width: 686rpx;
    height: 416rpx;
    background: #FFFFFF;
    border-radius: 20rpx 20rpx 20rpx 20rpx;

    .title {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #333333;
    }

    .name {
      margin-bottom: 20rpx;

      font-size: 24rpx;
      font-weight: 500;
      color: #000000;
    }

    .image {
      margin: 0 auto;
      width: 194rpx;
      height: 194rpx;

      >image {
        width: 194rpx;
        height: 194rpx;
      }

      .card {
        text-align: center;
        margin-top: 16rpx;
        font-size: 30rpx;
        font-weight: bold;
        color: #333333;
      }
    }
  }
</style>